<template>
	<view class="zh-trade">
		<view class="banner">
			<view class="banner-inner display-flex justify-between">
				<view class="left">
					<view class="title">
						<text>一站式交易</text>
					</view>
					<view class="des">海量资源、自有仓库、标准化在线交易，为客户高效匹配采供需求</view>
				</view>
				<view class="right">
					<image :src="IMG_URL + '/trade/index/banner.png'"/>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<image :src="IMG_URL + '/trade/index/1.png'"/>
				<view class="box">
					<view class="title">
						<text>现货商城</text>
					</view>
					<view class="des">
						<text>纱线现货，规格齐全，品质保证；下单即转货，无缝连接，高效交易订单全流程数字化管理，可视化跟踪</text>
					</view>
					<view class="btn" @click="navigateTo('/pages/shop/goodsList')">
						<text>商城采购</text>
					</view>
				</view>
			</view>
			<view class="item">
				<image :src="IMG_URL + '/trade/index/2.png'"/>
				<view class="box">
					<view class="title">
						<text>自有仓库</text>
					</view>
					<view class="des">
						<text>交易和智慧云仓数据连通，交易即转货权，便捷高效</text>
					</view>
					<view class="btn"  @click="reLaunch('/pages/userCenter/index')">
						<text>云仓办单</text>
					</view>
				</view>
			</view>
			<view class="item">
				<image :src="IMG_URL + '/trade/index/3.png'"/>
				<view class="box">
					<view class="title">
						<text>商家入驻</text>
					</view>
					<view class="des">
						<text>开放商家入驻，携手共赢</text>
					</view>
					<view class="btn" @click="apply">
						<text>申请商家入驻</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { nav } from '@/utils'
	import { onShareAppMessage } from '@dcloudio/uni-app';
	
	import { IMG_URL } from '@/utils/constant'
	
	onShareAppMessage(() => {})
	
	const reLaunch = (url:string) => {
		uni.reLaunch({
			url:url
		})
	}
	
	const apply = () => {
		if(!nav.isLogin()) {
			uni.reLaunch({
				url:'/pages/auth/login'
			})
		} else {
			nav.goCertify()
		}
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-trade {
		.banner {
			padding:45rpx 32rpx 24rpx;
			background:#fff;
			.banner-inner {
				background-color:#E3F1FE;
				border-radius: 18px;
				padding:0rpx 13rpx 0 35rpx;
				position:relative;
				.left {
					width:360rpx;
					padding:51rpx 30rpx 104rpx;
					.title {
						font-size:34rpx;
						color:#191A1B;
					}
					.des {
						font-size: 24rpx;
						color:#797A7D;
						margin-top: 20rpx;
					}
				}
				.right {
					right:0;
					top: 25rpx;
					position:absolute;
					image {
						width:294rpx;
						height: 242rpx;
					}
				}
			}
			
		}
		.content {
			padding-bottom:60rpx;
			.item {
				margin:22rpx 32rpx 0;
				background-color: #fff;
				overflow: hidden;
				border-radius: 16rpx;
				box-shadow: 0px 5px 13px 0px rgba(49,50,56,0.06);
				image {
					width:100%;
					height: 258rpx;
				}
				.box {
					padding:36rpx 32rpx 30rpx;
					
					.title {
						font-size: 28rpx;
						color:#202020;
						font-weight:bold;
					}
					.des {
						font-size: 24rpx;
						color:#999999;
						margin-top: 27rpx;
					}
					.btn {
						width: 622rpx;
						height: 88rpx;
						line-height: 88rpx;
						background: rgba(23,138,255,0.09);
						font-size: 32rpx;
						text-align:center;
						margin-top:25rpx;
						font-weight:bold;
						text {
							color:#178AFF;
						}
					}
				}
			}
		}
	}
</style>
